<!--
 * @Author: ChunLai
 * @Date: 2022-03-29 08:39:31
 * @LastEditTime: 2025-07-31 08:55:22
 * @Description: 
 * @FilePath: \02.bldinsure\src\views\index\components\TabModule.vue
-->
<template>
  <div class="notice" ref="notice">
    <van-tabs
      v-model="active"
      scrollspy
      sticky
      color="#F54040"
      title-active-color="#F54040"
      title-inactive-color="#747474"
    >
      <van-tab title="产品特色" v-if="productImg && productImg.length > 0">
        <ProIntroduce />
      </van-tab>
      <van-tab title="保障详情" v-if="showTab2">
        <div class="block_10 bg-f5"></div>
        <!-- 保险计划 -->
        <PlanDutyDesc v-if="insurePlansList.length > 0" />
        <!-- 保障责任 -->
        <InsurDutyDesc v-else-if="zeRenList.length > 0" />
      </van-tab>
      <van-tab title="理赔流程" v-if="liPeiModule">
        <div class="block_10 bg-f5"></div>
        <div class="sy-mode-head pdl17">理赔流程</div>
        <LiPeiService />
      </van-tab>
      <van-tab title="常见问题" v-if="askQues.length > 0">
        <div class="block_10 bg-f5"></div>
        <div class="sy-mode-head pdl17">常见问题</div>
        <div class="bg-fff pdbt_10">
          <div class="que_box">
            <Questions
              v-for="(item, index) in askQues"
              :key="index"
              :item="item"
            />
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Questions from "./Questions.vue";
import LiPeiService from "./LiPeiService.vue";
import ProIntroduce from "./ProIntroduce.vue";
import PlanDutyDesc from "./PlanDutyDesc.vue";
import InsurDutyDesc from "./InsurDutyDesc.vue";

export default {
  name: "TabModule",
  components: {
    Questions,
    LiPeiService,
    ProIntroduce,
    PlanDutyDesc,
    InsurDutyDesc,
  },
  data() {
    return {
      active: "1",
    };
  },
  computed: {
    ...mapGetters({
      productImg: "home/productImg",
      lipeiText: "home/lipeiText",
      askQues: "home/askQues",
      zeRenList: "page/zeRenList",
      insurePlansList: "page/insurePlansList",
      lipeicontent: "page/lipeicontent",
    }),
    liPeiModule() {
      let res = false;
      if (
        (this.lipeiText && this.lipeiText.length > 0) ||
        (this.lipeicontent && this.lipeicontent.length > 0)
      ) {
        res = true;
      }
      return res;
    },
    showTab2() {
      let res = false;
      if (this.insurePlansList.length > 0 || this.zeRenList.length > 0) {
        res = true;
      }
      return res;
    },
  },
};
</script>

<style lang="less" scoped>
.notice {
  /deep/.van-tabs__line {
    width: 56px;
  }
  /deep/.van-tab {
    font-size: 16px;
  }
}
.pdl17 {
  padding-left: 22px;
  &::before {
    left: 12px;
  }
}
.que_box {
  width: 351px;
  opacity: 1;
  border-radius: 10px;
  background: linear-gradient(180deg, #d6e8ff 0%, #fffafa 99.31%);
  margin: 0 auto;
  padding: 0 10px;
}
</style>
